<template>
  <div class='container'>
    <el-dialog
      title="题目预览"
      :visible="isPreview"
      width="50%"
      @close='onClose'>
      <!-- 第一部分标签 -->
      <el-row>
        <el-col :span="6">【题型】：{{questionDetail.questionType|formatQuestionType}}</el-col>
        <el-col :span="6">【编号】：{{questionDetail.id}}</el-col>
        <el-col :span="6">【难度】：{{questionDetail.difficulty|formatQuestionDifficulty}}</el-col>
        <el-col :span="6">【标签】：{{questionDetail.tags}}</el-col>
        <el-col :span="6">【学科】：{{questionDetail.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{questionDetail.directoryName}}</el-col>
        <el-col :span="6">【方向】：{{questionDetail.direction}}</el-col>
      </el-row>
      <!-- 题干部分 -->
      <p>【题干】：</p>
      <p v-html="questionDetail.question" class="title"></p>
      <div>
        <span v-if="!(questionDetail.questionType==='3')" class="questionType">{{questionDetail.questionType|formatQuestionType}}题 </span>
        <span v-if="!(questionDetail.questionType==='3')" class="answerCheck">选项：（以下选中的选项为正确答案）</span><br/>
        <hr v-if="questionDetail.questionType==='3'" />
        <!-- 多选 -->
        <el-checkbox-group v-model="checkList" v-if="questionDetail.questionType==='2'">
          <el-checkbox :label="item.isRight" v-for="item in questionDetail.options" :key="item.id" >
            {{item.title}}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 单选 -->
        <el-radio-group v-model="radio" v-else-if="questionDetail.questionType==='1'">
          <el-radio :label="item.isRight" v-for="item in questionDetail.options" :key="item.id" >
            {{item.title}}
          </el-radio>
        </el-radio-group>
        <!-- 文字题 -->
        <span v-else></span>
      </div>
      <!-- 参考答案 -->
      <div class="answer">
        <span>【参考答案】：</span><el-button size="small" type="danger" @click="onPlayVideo(questionDetail.videoURL)">视频答案预览</el-button>
        <!-- 视频组件 -->
        <VideoPlay :video='video' v-if='isShowVideo' />
      </div>
      <!-- 答案解析 -->
      <div class="answerKeys">
        <span>【答案解析】：<span class="answerKeysAnswer" v-html='questionDetail.answer'></span></span>
      </div>
      <!-- 题目备注 -->
      <div class="remark">
        <span>【题目备注】：{{questionDetail.remarks}}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VideoPlay from '@/components/VideoPlay'
export default {
  props: {
    isPreview: {
      type: Boolean,
      required: true
    },
    questionDetail: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      checkList: [1],
      radio: 1,
      isShowVideo: false,
      video: {
        url: ''
      }
    }
  },
  components: {
    VideoPlay
  },
  methods: {
    onPlayVideo (videoUrl) {
      // console.log(videoUrl)
      this.isShowVideo = true
      this.video.url = videoUrl
    },
    onClose () {
      this.$emit('update:isPreview', false)
    }
  }
}
</script>

<style scoped lang='less'>
.container{
  .el-dialog{
    .el-row{
      border-bottom: 1px solid #ccc;
      /deep/.el-col{
        padding: 10px 0;
      }
    }
    .el-checkbox,
    .el-radio{
      display: block;
      margin: 15px 0;
    }
    .el-checkbox-group,
    .el-radio-group{
      margin-bottom: 10px;
      border-bottom: 1px solid #ccc;
      width: 100%;
    }
    .answer,
    .answerKeys{
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }
    .answerKeys,
    .remark{
      margin-top: 10px;;
    }
    .title {
      color: blue;
    }
    .answerKeysAnswer{
      display: inline-block;
    }
  }
}
</style>
